import React, { useCallback, useEffect, useState } from 'react'
import { View, Text, Button, Image } from '@tarojs/components'
import { useEnv, useNavigationBar, useModal, useToast } from 'taro-hooks'
// import logo from "./hook.png";

import './index.less'
import AutorBar from 'src/components/AutorBar'
import ComBar from 'src/components/ComBar'
import Card from '@/components/Card'
import Search from '@/components/Search'
import Taro from '@tarojs/taro'
import { fetchBookList } from '@/api/book'

const bookIndex = require('../../data/books_400000.json')

const Index = () => {

  const [bookList,setBookList] = useState<any[]>([]) 

  const getBookList = async () => {
    const res = await fetchBookList({page: 0,size: 1000})
    setBookList(res?.data?.content ?? []) 
  }
 

  const hanldeClickBook = (item) => {
    Taro.navigateTo({ url: '/pages/book-detail/index?id='+ item.bookId })
  }


  useEffect(() => {
    getBookList()
  },[])

  return (
    <View className='wrapper'>
      <Search></Search>

      {/* <AutorBar></AutorBar> */}

      <ComBar></ComBar>

      <View className='cardList'>
        {bookList.map((item) => (
          <Card
            key={item.title}
            item={item}
            {...item}
            mode='content'
            onClick={hanldeClickBook}
          ></Card>
        ))}
      </View>
    </View>
  )
}

export default Index
